<template>
  <div id="ui-toolbar" class="container">
    <div v-for="item in tools" :key=item.id>
      <button :id=item.id class="ui-button" :dataType=item.dataType :onclick=item.onclick>
        <img class="toolbar-icon" :src=item.src>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { game } from '../game';

// Define the tools that we can use in building the city
const tools = [
  {
    id: "button-select",
    src: "src/assets/icons/select-color.png",
    dataType: "select",
    onclick: onToolSelected
  },
  {
    id: "button-bulldoze",
    src: "src/assets/icons/bulldozer-color.png",
    dataType: "bulldoze",
    onclick: onToolSelected
  },
  {
    id: "button-residential",
    src: "src/assets/icons/house-color.png",
    dataType: "residential",
    onclick: onToolSelected
  },
  {
    id: "button-commercial",
    src: "src/assets/icons/store-color.png",
    dataType: "commercial",
    onclick: onToolSelected
  },
  {
    id: "button-industrial",
    src: "src/assets/icons/factory-color.png",
    dataType: "industrial",
    onclick: onToolSelected
  },
  {
    id: "button-road",
    src: "src/assets/icons/road-color.png",
    dataType: "road",
    onclick: onToolSelected
  },
  {
    id: "button-power-plant",
    src: "src/assets/icons/power-color.png",
    dataType: "power-plant",
    onclick: onToolSelected
  },
  {
    id: "button-power-line",
    src: "src/assets/icons/power-line-color.png",
    dataType: "power-line",
    onclick: onToolSelected
  },
  {
    id: "button-pause",
    src: "src/assets/icons/pause-color.png",
    dataType: "pause",
    onclick: togglePause
  },
];

function onToolSelected(event: PointerEvent) {
  onclick(event);

  const eventTarget = event.target as HTMLElement;

  const dataType = eventTarget.getAttribute("dataType");

  game.activeToolId = dataType;

}

function togglePause(event: PointerEvent) {
  onclick(event);
  game.uiManager.togglePause();
}

function onclick(event: PointerEvent) {
  const target = event.target as HTMLElement;
  const buttonList = document.querySelectorAll(".ui-button");
  buttonList.forEach(button => {

    if (button === target) {
      button.classList.add("selected");
    } else {
      button.classList.remove("selected");
    }
  });
}

</script>

<style scoped></style>